M

MLOG

Français

Explorez CSS Subgrid et apprenez à créer des mises en page imbriquées complexes, responsives et maintenables pour le design web moderne. Maîtrisez les techniques de grille avancées.

CSS Subgrid : Libérer la puissance des mises en page imbriquées

CSS Grid a révolutionné la mise en page web, offrant une flexibilité et un contrôle inégalés. Cependant, la gestion des grilles imbriquées peut parfois devenir fastidieuse. C'est là que CSS Subgrid vient à la rescousse. Subgrid permet à un élément de grille d'hériter du dimensionnement des pistes de sa grille parente, simplifiant ainsi les mises en page complexes et rendant votre code plus facile à maintenir. Cet article fournit un guide complet pour comprendre et mettre en œuvre CSS Subgrid, avec des exemples pratiques et des conseils pour les développeurs de tous niveaux.

Qu'est-ce que CSS Subgrid ?

Subgrid est une fonctionnalité de CSS Grid qui permet à un élément de grille de devenir lui-même une grille, en héritant des pistes de lignes et de colonnes définies par sa grille parente. Cela signifie que vous pouvez aligner du contenu sur plusieurs grilles imbriquées sans définir explicitement la taille des pistes dans chaque grille imbriquée. Considérez cela comme un moyen d'étendre la structure de la grille parente à ses enfants, créant ainsi une mise en page plus cohérente et uniforme.

Pourquoi utiliser Subgrid ?

Compatibilité des navigateurs

Avant de plonger dans l'implémentation, il est essentiel de vérifier la compatibilité des navigateurs. Fin 2023, Subgrid bénéficie d'un bon support sur les navigateurs modernes, y compris Chrome, Firefox, Safari et Edge. Cependant, il est toujours bon d'utiliser Can I use pour vérifier l'état de support le plus récent.

Implémentation de base de Subgrid

Commençons par un exemple simple pour illustrer les concepts fondamentaux de Subgrid.

Structure HTML

D'abord, nous définissons la structure HTML de base pour notre grille.


<div class="container">
  <div class="header">En-tête</div>
  <div class="sidebar">Barre latérale</div>
  <div class="content">
    <div class="item-1">Élément 1</div>
    <div class="item-2">Élément 2</div>
    <div class="item-3">Élément 3</div>
    <div class="item-4">Élément 4</div>
  </div>
  <div class="footer">Pied de page</div>
</div>

Style CSS

Maintenant, définissons le CSS pour créer la grille parente et la sous-grille à l'intérieur de l'élément .content.


.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

.header {
  grid-area: header;
  background-color: #eee;
  padding: 10px;
}

.sidebar {
  grid-area: sidebar;
  background-color: #ddd;
  padding: 10px;
}

.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  background-color: #ccc;
  padding: 10px;
}

.item-1, .item-2, .item-3, .item-4 {
  background-color: #bbb;
  padding: 10px;
}

.footer {
  grid-area: footer;
  background-color: #eee;
  padding: 10px;
}

/* Définir le placement des éléments dans la sous-grille .content */
.content {
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
    display: grid;
}

.item-1 { grid-column: 1; grid-row: 1; }
.item-2 { grid-column: 2; grid-row: 1; }
.item-3 { grid-column: 1; grid-row: 2; }
.item-4 { grid-column: 2; grid-row: 2; }

Dans cet exemple, l'élément .content est défini comme une sous-grille. Les propriétés grid-template-columns: subgrid; et grid-template-rows: subgrid; indiquent à la sous-grille d'hériter du dimensionnement des pistes de la grille parente. La zone de contenu se conforme désormais au dimensionnement des pistes défini dans la grille du conteneur principal, sans nécessiter de paramètres explicites pour la sous-grille elle-même. Cela garantit un alignement parfait entre la barre latérale et les éléments de la zone de contenu.

Techniques avancées de Subgrid

Extension sur plusieurs pistes

Subgrid permet également aux éléments de la sous-grille de s'étendre sur plusieurs pistes, tout comme dans une grille normale. Cela offre encore plus de flexibilité dans la création de mises en page complexes.


.item-1 {
  grid-column: 1 / span 2;
  grid-row: 1;
}

Ce code fera en sorte que .item-1 s'étende sur les deux premières colonnes de la sous-grille.

Lignes de grille nommées

Vous pouvez utiliser des lignes de grille nommées avec Subgrid pour encore plus de clarté et de contrôle. Disons que vous avez des lignes nommées dans votre grille parente :


.container {
  display: grid;
  grid-template-columns: [sidebar-start] 200px [sidebar-end content-start] 1fr [content-end];
  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
  grid-template-areas:
    "header header"
    "sidebar content"
    "footer footer";
  height: 100vh;
}

Vous pouvez ensuite faire référence à ces lignes nommées dans votre sous-grille :


.content {
  grid-area: content;
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.item-1 {
  grid-column: content-start / content-end;
  grid-row: content-start;
}

Gestion des pistes implicites

Si le nombre d'éléments de la grille dépasse le nombre de pistes définies dans la grille parente, Subgrid créera des pistes implicites. Vous pouvez contrôler la taille de ces pistes implicites en utilisant les propriétés grid-auto-rows et grid-auto-columns, comme avec une grille CSS classique.

Exemples pratiques et cas d'utilisation

Explorons quelques exemples pratiques de la manière dont Subgrid peut être utilisé pour créer des mises en page sophistiquées.

Liste de produits complexe

Imaginez une liste de produits où vous souhaitez afficher plusieurs détails de produit (image, nom, description, prix) de manière cohérente et alignée. Subgrid peut aider à atteindre cet objectif facilement.


<div class="product-grid">
  <div class="product">
    <img src="product1.jpg" alt="Produit 1">
    <h3>Nom du Produit 1</h3>
    <p>Description du produit 1.</p>
    <span>99,99 €</span>
  </div>
  <div class="product">
    <img src="product2.jpg" alt="Produit 2">
    <h3>Nom du Produit 2</h3>
    <p>Description du produit 2.</p>
    <span>129,99 €</span>
  </div>
</div>


.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.product {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  border: 1px solid #ccc;
  padding: 10px;
}

.product > img {
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  height: auto;
}

.product > h3 {
  grid-column: 1;
  grid-row: 2;
  margin-top: 10px;
}

.product > p {
  grid-column: 1;
  grid-row: 3;
  margin-top: 5px;
}

.product > span {
  grid-column: 1;
  grid-row: 4;
  margin-top: 10px;
  font-weight: bold;
}

Dans cet exemple, les éléments .product utilisent Subgrid pour aligner l'image, le nom, la description et le prix de manière cohérente sur tous les produits, même si la longueur de leur contenu varie. Cela garantit une présentation propre et professionnelle.

Mise en page de type magazine

Créer des mises en page de style magazine avec des blocs de contenu variables peut être un défi. Subgrid simplifie le processus en vous permettant d'aligner des éléments sur différentes sections de la mise en page.


<div class="magazine-layout">
  <div class="main-article">
    <h2>Titre de l'article principal</h2>
    <p>Contenu de l'article principal...</p>
  </div>
  <div class="sidebar-article">
    <h3>Titre de l'article en barre latérale</h3>
    <p>Contenu de l'article en barre latérale...</p>
  </div>
  <div class="featured-image">
    <img src="featured.jpg" alt="Image à la une">
  </div>
</div>


.magazine-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 20px;
}

.main-article {
  grid-column: 1;
  grid-row: 1 / span 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.sidebar-article {
  grid-column: 2;
  grid-row: 1;
  border: 1px solid #ccc;
  padding: 10px;
}

.featured-image {
  grid-column: 2;
  grid-row: 2;
  border: 1px solid #ccc;
  padding: 10px;
}

.magazine-layout > div {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: subgrid;
}

.magazine-layout h2, .magazine-layout h3 {
    grid-column: 1;
    grid-row: 1;
}

.magazine-layout p {
    grid-column: 1;
    grid-row: 2;
}

.magazine-layout img {
    grid-column: 1;
    grid-row: 1;
}

Dans cet exemple, l'article principal, l'article de la barre latérale et l'image à la une partagent tous la même structure de grille, garantissant un alignement cohérent des titres et du contenu entre les différentes sections. L'utilisation de Subgrid simplifie le CSS et rend la mise en page plus facile à maintenir.

Mises en page de formulaires

Créer des mises en page de formulaires complexes avec des étiquettes et des champs de saisie alignés peut être délicat. Subgrid offre une solution simple.


<form class="form-grid">
  <div class="form-row">
    <label for="name">Nom :</label>
    <input type="text" id="name" name="name">
  </div>
  <div class="form-row">
    <label for="email">Email :</label>
    <input type="email" id="email" name="email">
  </div>
  <div class="form-row">
    <label for="message">Message :</label>
    <textarea id="message" name="message"></textarea>
  </div>
</form>


.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.form-row {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.form-row label {
  grid-column: 1;
  grid-row: 1;
  text-align: right;
  padding-right: 10px;
}

.form-row input, .form-row textarea {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
}


.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr; /* Définir la taille des pistes dans la grille parente */
    gap: 10px;
}

Ici, les éléments .form-row utilisent Subgrid pour aligner les étiquettes et les champs de saisie de manière cohérente sur toutes les lignes. La taille des pistes est définie dans la grille parente (.form-grid), garantissant une apparence uniforme.

Bonnes pratiques et considérations

Subgrid vs. Grille CSS classique

Bien que Subgrid et CSS Grid soient tous deux de puissants outils de mise en page, ils servent des objectifs différents. La grille CSS classique est idéale pour créer des mises en page globales et définir la structure de base de votre contenu. Subgrid, d'un autre côté, est plus adapté à la gestion des mises en page imbriquées et à l'alignement du contenu sur plusieurs niveaux d'imbrication. Considérez Subgrid comme une extension de CSS Grid qui simplifie les scénarios de mise en page complexes.

Dépannage des problèmes courants

Conclusion

CSS Subgrid est un ajout précieux à la boîte à outils de CSS Grid, offrant un moyen puissant de gérer des mises en page imbriquées complexes et de créer des designs web visuellement attrayants, maintenables et responsives. En comprenant les concepts fondamentaux et en explorant des exemples pratiques, vous pouvez tirer parti de Subgrid pour construire des mises en page sophistiquées qui étaient auparavant difficiles ou impossibles à réaliser avec les techniques CSS traditionnelles. Adoptez Subgrid et débloquez de nouvelles possibilités dans vos projets de développement web. Subgrid vous permet de véritablement étendre la puissance de la grille CSS aux éléments imbriqués, offrant un meilleur contrôle et une meilleure maintenabilité du code. Expérimentez avec et explorez ses avantages pour simplifier les mises en page CSS compliquées.

Ressources supplémentaires